<template>
  <div class="transpond" v-if="visible">
    <div class="transpond__left">
      <div class="transpond__left__top">
        <el-input clearable class="transpond__left__top__search" placeholder="搜索..." v-model="search">
          <img slot="prefix" src="../../../assets/picture/iconfont-sousuo@2x.png" />
        </el-input>
      </div>
      <div class="transpond__left__body">
        <TranspondCard v-for="(item, index) in roomList" :key="index" :info="item"/>
      </div>
    </div>
    <div class="transpond__right">
      <div class="transpond__right__title">分别发送给</div>
      <div class="transpond__right__body">
        <div @click="deleteSelectUser(item)" v-for="(item, index) in selectUserInfo" :key="index" class="transpond__right__body__card">
          <div class="transpond__right__body__card__left">
            <el-avatar class="transpond__right__body__card__left__avatar" :size="34" :src="item.avatar">
              <img v-if="!item.dialCode" src="../../../assets/picture/群头像150.png" />
            </el-avatar>
            <span class="transpond__right__body__card__left__name">{{ item.nickName ? item.nickName : item.name }}</span>
          </div>
          <div class="transpond__right__body__card__right">
            <i class="tico tico-circle-close-b" />
          </div>
        </div>
      </div>
      <div class="transpond__right__footer">
        <el-button @click="cancel" size="small" round class="transpond__right__footer__cancel">取消</el-button>
        <el-button @click="trannspond" size="small" type="primary" round class="transpond__right__footer__confirm">转发</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import _ from 'lodash'
import TranspondCard from './TranspondCard'
import { sendData } from '../../../api/ChatSocket'
// import moment from 'moment'
import { uuid } from 'vue-uuid'
import BigNumber from 'bignumber.js'
export default {
  data () {
    return {
      search: '',
      selectfileHelper: { roomId: '100008', name: '文件传输助手', nickName: '文件传输助手', avatar: require('../../../assets/picture/fileAssistant@2x.png'), friendType: 'fileFriend', id: sessionStorage.getItem('aillo_id') }
    }
  },
  components: { TranspondCard },
  computed: {
    ...mapState('transpond', ['visible', 'selectUserIds', 'selectInfo']),
    ...mapState('app', ['chatList', 'friendList', 'groupList']),
    roomList: function () { // 获取所有聊天室列表
      if (this.search !== '') {
        const friendList = _.compact(_.map(this.friendList, e => {
          const reg = new RegExp(this.search)
          if (reg.test(e.name) || reg.test(e.nickName) || reg.test(e.remark)) {
            return e
          }
        }))
        const groupList = _.compact(_.map(this.groupList, e => {
          const reg = new RegExp(this.search)
          if (reg.test(e.name)) {
            return e
          }
        }))
        const fileHelper = [{ roomId: '100008', name: '文件传输助手', nickName: '文件传输助手', avatar: '', friendType: 'fileFriend', id: sessionStorage.getItem('aillo_id') }]
        console.log('聊天室', [...friendList, ...groupList, ...fileHelper])
        return [...friendList, ...groupList, ...fileHelper]
      } else {
        return this.defaultList
      }
    },
    selectUserInfo: function () { // 选中的聊天室
      const list = _.map(this.selectUserIds, e => {
        const a = _.findIndex(this.friendList, a => a.roomId + '' === e + '')
        const b = _.findIndex(this.groupList, a => a.roomId + '' === e + '')
        if (a !== -1) {
          return this.friendList[a]
        }
        if (b !== -1) {
          return this.groupList[b]
        }
        if (this.selectfileHelper.roomId + '' === e) {
          return this.selectfileHelper
        }
      })
      return _.compact(list)
    },
    defaultList: function () { // 初始默认展示当前正在使用的聊天室
      const list = _.map(this.chatList, (value, key) => {
        const a = _.findIndex(this.friendList, e => e.roomId + '' === key + '')
        const b = _.findIndex(this.groupList, e => e.roomId + '' === key + '')
        if (a !== -1) {
          return this.friendList[a]
        }
        if (b !== -1) {
          return this.groupList[b]
        }
        // 文件助手
        if (this.selectfileHelper.roomId + '' === key) {
          return this.selectfileHelper
        }
      })
      return _.compact(list)
    }
  },
  methods: {
    deleteSelectUser (info) { // 删除选中的聊天室
      const data = _.cloneDeep(this.selectUserIds)
      _.remove(data, e => e + '' === info.roomId + '')
      this.$store.dispatch('transpond/setSelectUserIds', data)
    },
    isGroup: function (id) { // 选中的聊天室是否群聊
      const i = _.findIndex(this.groupList, a => a.roomId + '' === id + '')
      return i !== -1
    },
    getReceiverId (roomId) { // 获取单聊的聊天室ID
      const fileHelper = [{ roomId: '100008', name: '文件传输助手', nickName: '文件传输助手', avatar: '', friendType: 'fileFriend', id: sessionStorage.getItem('aillo_id') }]
      const friendListNew = [...this.friendList, ...fileHelper]
      const i = _.findIndex(friendListNew, e => e.roomId + '' === roomId)
      return friendListNew[i].id + ''
    },
    trannspond () { // 开始转发
      for (let i = 0; i < this.selectUserIds.length; i++) {
        const temp = _.cloneDeep(this.selectInfo) // 组成存入vuex的数据
        let data = {} // 组成发送的消息
        if (this.isGroup(this.selectUserIds[i])) {
          temp.msgType = 'groupChat'
        } else {
          if (this.selectUserIds[i] !== '100008') {
            temp.msgType = 'singleChat'
          } else {
            temp.msgType = 'fileHelper'
          }
          temp.receiverId = this.getReceiverId(this.selectUserIds[i])
        }
        temp.timestamp = BigNumber(new Date().getTime()).toString()
        temp.roomId = this.selectUserIds[i]
        // temp.requestId = uuid.v1()
        data.msgType = temp.msgType
        data.subType = temp.subType
        const { msgType, subType, ...other } = temp
        const backId = uuid.v1()
        data.data = other
        temp.backId = backId
        data.data.backId = backId
        data.data.requestId = backId

        // 上面都是整合数据
        sendData(data) // 发送信息
        temp.isMe = true
        this.$store.dispatch('app/addChatListMsg', temp) // 信息存入vuex
      }
      if (this.selectUserIds.length > 0) {
        this.$notify({
          title: '成功',
          message: '转发成功',
          type: 'success'
        })
        this.cancel()
      } else {
        this.$notify({
          title: '错误',
          message: '没有选择聊天室或好友',
          type: 'error'
        })
      }
    },
    cancel () { // 关闭转发页面
      this.$store.dispatch('transpond/setvisible', false)
      this.$store.dispatch('transpond/setSelectUserIds', [])
    }
  }
}
</script>

<style lang="scss">
.transpond {
  position: absolute;
  top: 220px;
  background: white;
  box-shadow:0px 2px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius:6px;
  width: 540px;
  height: 400px;
  display: flex;
  .el-input__prefix {
      top: 7px !important;
    }
    .el-input__inner {
      border-radius: 20px;
      background-color: #f5f5f5;
      height: 30px;
    }
    .el-input__suffix {
      top: -5px !important;
    }
  &__left {
    width: 270px;
    border-right: 1px solid #EEE;
    padding: 20px 0 20px 20px;
    &__top {
      margin-right: 20px;
      &__search {
        width: 206px;
        img {
          cursor: pointer;
        }
      }
    }
    &__body {
      margin-top: 20px;
      height: 330px;
      overflow-y: auto;
      padding-right: 20px;
    }
  }
  &__right {
    width: 270px;
    padding: 20px;
    &__title {
      font-weight: 500;
      font-size:16px;
      margin-bottom: 20px;
    }
    &__body {
      height: 300px;
      overflow: auto;
      &__card {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content:space-between;
        margin-bottom: 10px;
        &__left {
          display: flex;
          align-items: center;
          &__name {
            margin-left: 11px;
            font-size: 16px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 150px;
          }
        }
        &__right {
          font-size: 18px;
          color: #bbb;
        }
      }
    }
    &__footer {
      display: flex;
      justify-content: flex-end;
      &__cancel {
        background: #EEE;
        width: 80px;
      }
      &__confirm {
        width: 80px;
      }
    }
  }
}
</style>
